<template>
    <div class="frame" :style="{width: width, height:height,}">
        <div  >
            <div class="slotTitle"  :style="{fontSize: fontSize, padding:slotPadding}">
                <div>
                    <slot name="title"></slot>
                     </div>
                <div class="slotBtn" >
                    <slot name="btn"></slot> 
                </div>
            </div>
            <div>
                <div class="slotContent"   :style="{height: slotContentHeight}">
                    <slot name="content"></slot>
                </div>
            </div>
        </div>
    </div>
</template>
<script>

export default {
    props:{
            width:{
                type:String,
                default : "1539px"
            },
            height:{
                type:String,
                height:'786px'
            },
            fontSize:{
                type:String,
                default:"24px"
            },
            slotContentHeight:{
                 type:String,
                default:"760px"
            },
            slotPadding:{
                 type:String,
                default:"7px 0"
            }
        
    },
        data(){
            return{

            }
        },
        methods:{
            close(){
                this.$eimt("close")
            }
        },


}
</script>
<style  scoped>
.frame{
    color:#fff;
    border: 1px solid #fff;
   margin:  auto;
   background-color: #001614;
  box-shadow: 0px 5px 29px 0px #0dc2c3 inset;
    
}
    .slotTitle {
        width: 100%;
        background-color: #00968e;
        position: relative;
        text-align: center;

    }
 
    .slotBtn {
        position: absolute;
        right: 20px;
        top:50%;
        transform: translateY(-50%);
    }
    .slotContent {
        /* overflow: hidden; */
        /* background-color: #001614; */
    }
   
</style>